<template>
  <div class="cartbottom">
    <div class="checkcontent">
      <div class="checkbox">
        <img
          src="~assets/img/little-icon/check.png"
          alt=""
          :class="{ checked: ischeckedall }"
          @click="selectall"
        />
      </div>
      <span>全选</span>
    </div>
    <div class="totalprice">合计:{{ totalprice }}</div>
    <div class="cal" @click="cal">去计算({{ checklength }})</div>
  </div>
</template>

<script>
export default {
  computed: {
    totalprice() {
      return (
        "￥" +
        this.$store.state.cartList
          .filter((item) => {
            return item.checked;
          })
          .reduce((prevalue, item) => {
            return prevalue + item.price * item.count;
          }, 0)
          .toFixed(2)
      );
    },
    checklength() {
      return this.$store.state.cartList.filter((item) => {
        return item.checked;
      }).length;
    },
    ischeckedall() {
      if (this.$store.state.cartList.length == 0) return false;
      return !this.$store.state.cartList.find((item) => !item.checked);
    },
  },
  methods: {
    selectall() {
      if (this.ischeckedall) {
        this.$store.state.cartList.filter((item) => {
          item.checked = false;
        });
      } else {
        this.$store.state.cartList.filter((item) => {
          item.checked = true;
        });
      }
    },
    cal() {
      if (!this.checklength) {
        this.$toast.show("未选中商品", 1400);
      }
    },
  },
};
</script>
<style scoped>
.checkcontent {
  display: flex;
  align-items: center;
  width: 70px;
  margin-right: 20px;
}
.checkbox img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid gray;
  margin-right: 5px;
}
.checked {
  background-color: red;
}
.cartbottom {
  display: flex;
  /* justify-content: space-between; */
  padding: 5px;
  align-items: center;
  height: 48px;
  background-color: rgb(226, 223, 224);
}
.totalprice {
  flex: 1;
}
.cal {
  width: 70px;
  height: 58px;
  background-color: pink;
  line-height: 58px;
  color: white;
}
</style>
